<template>
	<div class="right-order">
		<div class="address-info">
			<i class="iconfont icon-gps"></i>
			<div class="address">
				<div class="address-people">
					<p>收货人：XXX</p>
					<p>13551234321</p>
				</div>
				<p>收货地址：测试地址测试地址测试地址测试地址测试地址测试地址测试地址测试地址</p>
			</div>
			<i class="iconfont icon-rightarrow"></i>
		</div>
		<div class="order-info">
			<!-- -->
			<div class="store-item" v-for="(item,idx) in orderData">
				<div class="store-info">
					<img :src="item.storeIcon" class="store-icon" />
					<router-link :to="{path: '/store'}">
						<span class="store-name">{{item.storeName}}</span>
						<i class="iconfont icon-rightarrow"></i>
					</router-link>
				</div>
				<div class="product-item" v-for="(itemInfo,$index) in item.productList">
					<div class="product-info">
						<img :src="itemInfo.productUrl" class="product-img" />
						<div class="product-detail">
							<p class="product-name">{{itemInfo.productName}}</p>
							<p class="product-type">{{itemInfo.productType}}</p>
							<div class="product-price">
								<span class="now-price">￥{{itemInfo.productNowPrice}}</span>
								<span class="prime-price" v-if="itemInfo.productNowPrice !== itemInfo.productPrimePrice">￥{{itemInfo.productPrimePrice}}</span>
								<span class="product-num">&times;{{itemInfo.num}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- -->
			<mt-cell title="邮费" is-link value="129"></mt-cell>
		</div>
		<div class="pay-order-box">
			<p>合计金额：<span>￥199.00</span></p>
			<button type="button">提交订单</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'right_order',
		data() {
			var cartData = [];
			for(var i = 0; i < 1; i++) {
				cartData.push({
					storeName: '测试商铺',
					storeIcon: 'http://www.css88.com/favicon-32.png',
					productList: [],
					isChecked: false
				});
				for(var k = 0; k < parseInt(Math.random() * 1 + 1); k++) {
					cartData[i].productList.push({
						productName: '测试商品名称',
						productUrl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2912299985,3894161168&fm=173&s=ED64536E8CE4A49603F5711A0300C091&w=218&h=146&img.JPG',
						productType: '测试类型',
						productNowPrice: '599',
						productPrimePrice: '899',
						num: parseInt(Math.random() * 5 + 1),
						isChecked: false
					})
				}
			}
			return {
				orderData: cartData
			}
		},
		methods: {

		},
		created() {
			this.api.setHeader('确认订单');
		}
	}
</script>

<style lang="less">
	.right-order {
		height: 100%;
		background-color: #EFEFEF;
		padding-bottom: 1rem;
		.order-info {
			margin: 0.2rem 0;
			.store-item {
				margin-top: 0.2rem;
				margin-bottom: 0.2rem;
				background-color: #FFFFFF;
				.store-info {
					font-size: 0.24rem;
					display: flex;
					align-items: center;
					margin-left: 0.24rem;
					border-bottom: 1px solid #DFDFDF;
					padding: 0.15rem 0;
					img {
						width: 0.5rem;
						margin-right: 0.2rem;
					}
					.iconfont {
						font-size: 0.24rem;
					}
				}
				.product-item {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #DFDFDF;
					height: 2rem;
					padding-left: 0.24rem;
					.product-info {
						display: flex;
						width: 100%;
						height: 2rem;
						font-size: 0.24rem;
						&>div {
							padding: 0.15rem 0;
						}
						.product-img {
							padding: 0.15rem 0;
							max-width: 2.5rem;
							margin-right: 0.2rem;
						}
						.product-detail {
							width: calc(~'100% - 2.9rem');
							position: relative;
							.product-name {
								font-size: 0.28rem;
								color: #363636;
							}
							.product-type {
								color: #CCCCCC;
								font-size: 0.24rem;
								position: absolute;
								left: 0;
								bottom: 0.6rem;
							}
							.product-price {
								position: absolute;
								left: 0;
								bottom: 0.21rem;
								right: 0;
								.now-price {
									font-size: 0.28rem;
									color: #E4393C;
								}
								.prime-price {
									text-decoration: line-through;
									color: #CCCCCC;
									font-size: 0.24rem;
								}
								.product-num {
									float: right;
									color: #CCCCCC;
								}
							}
						}
					}
				}
			}
		}
		.address-info {
			display: flex;
			background-color: #FFFFFF;
			padding: 0.2rem 0;
			align-items: center;
			justify-content: space-between;
			.address-people {
				display: flex;
				justify-content: space-between;
				&+p {
					margin-top: 0.05rem;
				}
			}
			.iconfont {
				width: 0.9rem;
				text-align: center;
				color: #363636;
			}
		}
		.pay-order-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			font-size: 0.3rem;
			border-top: #DDDDDD;
			line-height: 1rem;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			p {
				span {
					color: #E4393C;
				}
			}
			button {
				width: 2rem;
				height: 1rem;
				border: none;
				outline: none;
				color: #FFFFFF;
				background-color: #E4393C;
			}
		}
	}
</style>